<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,uesr-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/inde-c3.css">
    <link rel="stylesheet" href="../css/stu-video.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/personal-detail.css">
</head>

<body>
<div class="objConter">
    <div class="leftFixlis">
        <div class="fixTophead"><img src="../images/detail-data-tu.gif" alt=""></div>
        <div class="fixCont">
            <ul>
                <a href="../index.jsp">
                    <li class="mouseclick"><i class="fa fa-question"></i> 问答库 <i class="fa fa-chevron-right"
                                                                                 style="display:none"></i>
                    </li>
                </a>
                <a href="">
                    <li class="mouseclick"><i class="fa fa-book"></i> 资料库 <i class="fa fa-chevron-right"
                                                                             style="display:none"></i>
                    </li>
                </a>
                <a href="javascript:;">
                    <li class="mouseclick"><i class="fa fa-play-circle"></i> 云视频 <i
                            class="fa fa-chevron-right"></i></li>
                </a>

                <a href="">
                    <li class="mouseclick"><i class="fa fa-comments-o"></i> 社交互动 <i class="fa fa-chevron-right"
                                                                                    style="display:none"></i></li>
                </a>


            </ul>

        </div>
    </div>
    <div class="conterTop">
        <div class="topCont clearBox">
            <div class="topLeft">
                <ul class="topLeft-font">
                    <a href="../index.html">
                        <li class="mouseclick"><i class="fa fa-home"></i>主页</li>
                    </a>
                    <a href="">
                        <li class="mouseclick cta">我的学习</li>
                    </a>
                    <a href="">
                        <li class="mouseclick cta">我的班级</li>
                    </a>
                    <a href="">
                        <li class="mouseclick"><i class="fa fa-th"></i>更多功能</li>
                    </a>
                    <li class="mouseclick clearBox" id="top-seek">
                        <form action="">
                            <input type="text" placeholder="视频名称">
                            <!-- <button class="fa fa-search"></button> -->
                            <input type="submit" value="">
                        </form>

                    </li>
                </ul>
            </div>
            <div class="topRight">
                <ul class="topRight-font clearBox">
                    <a href="javascript:;">
                        <li class="rightlis selectFar mouseclick"><img src="../images/detail-data-tu.gif" alt=""
                                                                       class="headPh">
                            <ul class="selectCont">
                                <a href="javascript:;">
                                    <li class="mouseclick cta" id="mater">个人资料</li>
                                </a>
                                <a href="">
                                    <li class="mouseclick cta">使劲更改</li>
                                </a>
                                <a href="">
                                    <li class="mouseclick cta">使劲更改</li>
                                </a>
                            </ul>
                        </li>
                    </a>
                    <a href="">
                        <li class="rightlis mouseclick"><i class="fa fa-bell"></i> 消息

                        </li>
                    </a>
                    <a href="/pages/qiandao.html">
                        <li class="rightlis mouseclick"><i class="fa fa-calendar-check-o"></i> 签到</li>
                    </a>
                </ul>
            </div>
        </div>
    </div>
    <div class="conterQuestion">
        <div class="video-Contbox">
            <!-- 内容选择 -->
            <div class="video-title clearBox">
                <span class="mouseclick">全部视频</span>
                <span class="mouseclick">老师视频</span>
                <span class="mouseclick">我的视频</span>
                <div class="videosSeek">
                    <form action="">
                        <input type="text" name="earch" id="earchVideo" placeholder="视频关键字">
                        <input type="submit" id="earchBtn">
                    </form>
                </div>
            </div>
            <div class="video-cont">


                <!-- 视频简介 -->
                <!-- 全部视频 -->
                <!-- <div class="allvideo-conter clearBox"> -->
                <!-- 列表样 -->
                <!-- <div class="videoinfor clearBox">
                        <div class="legendHead"><img src="../images/detail-data-tu.gif" alt=""></div>
                        <div class="legendContent">
                            <p>用户名</p>
                            <span>简介，即简明扼要的介绍。是当事人全面而简洁地介绍情况的一种书面表达方式，它是应用写作学研究的一种日常应用文体。</span>
                            <a href="">下载</a>
                        </div>
                    </div> -->

                <!-- 块块样 -->
                <!-- <div class="videoinfo mouseclick">
                        <div class="videoCover mouseclick"><video id="video" preload="auto" poster="">
                                <source src="../videos/(2018英雄联盟全球总决赛开场曲)(蓝光).mp4"></video></div>
                        <div class="videoTitle">
                            <p>简介，即简明扼要的介绍。是当事人全面而简洁地介绍情况的一种书面表达方式<a href="" class="mouseclick">下载</a></p>
                        </div>
                        <div class="legend">
                            <span>上传用户 :<a href="" class="mouseclick">FzF</a> <span>学生</span></span>

                        </div>
                    </div>

                </div> -->


                <!-- 老师视频 -->
                <!-- <div class="tervideo-conter">

                </div>
                -->
                <!-- 我的视频 -->

                <div class="stuvideo-conter">
                    <!-- 视频 -->
                    <div class="stuvideo-left clearBox">
                        <c:forEach items="${VideoList}" var="video">
                        <div class="videoinfo mouseclick">
                            <div class="videoCover mouseclick">
                                <video id="video" preload="auto" poster="">
                                    <source src="${video.videoAddress}">
                                </video>
                            </div>
                            <div class="videoTitle">
                                <p>${video.videoInfo}<a href="/DownLoadS?method=DownLoad&videoId=${video.videoid}&videoName=${video.videoName}" class="mouseclick">下载</a></p>
                            </div>
                            <div class="legend">
                                <span>上传用户 :<a href="" class="mouseclick">${video.username}</a> <span>谭仁龙</span></span>
                            </div>
                        </div>
                        </c:forEach>
                    </div>
                    <!-- 上传 -->
                    <div class="stuvideo-right">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <!-- ------ -->
            </div>
        </div>
    </div>


    <div class="material" style="display:none">
        <div class="personal-r f-r">
            <div class="personal-right">
                <div class="personal-r-tit">
                    <h3><i class="fa fa-address-book-o fa-lg"></i>&nbsp;&nbsp;个人资料</h3>
                    <i class="fa fa-compress fa-2x mouseclick" id="mateBtn"></i>
                </div>
                <div class="data-con">
                    <div class="dt1">
                        <p class="f-l"><i class="fa fa-camera-retro fa-lg"></i>&nbsp;&nbsp;当前头像：</p>
                        <div class="touxiang f-l" id="mouseclick">
                            <div class="tu f-l">
                                <a href="#">
                                    <img src="../images/detail-data-tu.gif"/>
                                    <input type="file" name="" id="" class="img1"/>
                                </a>
                            </div>
                            <a href="JavaScript:;" class="sc f-l " id="mouseclick" shangchuang="">上传头像</a>
                            <div style="clear:both;"></div>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1">
                        <p class="dt-p f-l"><i class="as fa fa-user-circle-o fa-lg"></i>&nbsp;&nbsp;昵称：</p>
                        <input type="text" placeholder="请输入昵称"/>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1">
                        <p class="dt-p f-l"><i class="fa fa-user-o fa-lg"></i> &nbsp;&nbsp;用户名：</p>
                        <input type="text" placeholder="请输入你的用户名" value="全栈"/>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1 dt2">
                        <p class="dt-p f-l"><i class="sex fa fa-venus-mars fa-lg"></i>&nbsp;性别：</p>
                        <input type="radio" name="hobby" value="nan"></input><span><i
                            class="fa fa-mars fa-lg"></i></span>
                        <input type="radio" name="hobby" value="nan"></input><span><i
                            class="fa fa-venus fa-lg"></i></span>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1">
                        <p class="dt-p f-l"><i class="age fa fa-birthday-cake fa-lg"></i>&nbsp;&nbsp;年龄：</p>
                        <input type="text" placeholder="请输入您的年龄" value="20"/>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1 dt3">
                        <p class="dt-p f-l"><i class="phone fa fa-phone-square fa-lg"></i>&nbsp;手机号：</p>
                        <input type="text" placeholder="请输入你的手机号" value="12345678910"/>
                        <button id="mouseclick">获取短信验证码</button>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1">
                        <p class="dt-p f-l"><i class="code fa fa-address-card-o fa-lg"></i>验证码：</p>
                        <input type="text" placeholder="请输入你的验证码" value=""/>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1">
                        <p class="dt-p f-l"><i class="email fa fa-qq fa-lg"></i>&nbsp;&nbsp;邮箱：</p>
                        <input type="text" placeholder="请输入你的邮箱" value="111111111@qq.com"/>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1 dt4">
                        <p class="dt-p f-l"><i class="password fa fa-address-card-o fa-lg"></i>&nbsp;&nbsp;密码：</p>
                        <input type="password" placeholder="请输入你的密码" value=""/>
                        <button id="mouseclick">修改密码</button>
                        <div style="clear:both;"></div>
                    </div>
                    <button class="btn-pst" id="mouseclick">保存</button>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>

</div>
</div>


</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/csanimate.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" color="0, 0, 0" pointColor="0, 0, 0" opacity='1' zIndex="-2" count="100"
        src="../background-special-effects/dist/canvas-nest.js"></script>
<script type="text/javascript" src="../background-special-effects/dist/canvas-nest.umd.js"></script>
<script type="text/javascript">
    var cn = new CanvasNest(document.getElementById('area-render'), {
        color: '0,0,0',
        count: 50,
    });

    // var scene = document.querySelector('body');
    // var parallax = new Parallax(scene, {
    //     calibrateX: false,
    //     calibrateY: true,
    //     invertX: false,
    //     invertY: true,
    //     limitX: false,
    //     limitY: 10,
    //     scalarX: 2,
    //     scalarY: 8,
    //     frictionX: 0.2,
    //     frictionY: 0.8
    // });
</script>

</html>